<template>
    <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
      <div class="pan-info">
        <div :id="containerId">
        </div>
      </div>
    </div>
  </template>

<script>
import pointImg from '@/assets/images/point.png'

export default {
  name: 'PanThumb',
  props: {
    zIndex: {
      type: Number,
      default: 1
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    longitude: {
      type: [Number, String],
      default: 114.51638121460337
    },
    latitude: {
      type: [Number, String],
      default: 38.146048668428364
    },
    containerId: {
      type: String,
      default: 'containerMap'
    }
  },
  data() {
    return {
      map: null,
      markerLayer: null,
      centerEnable: false,
      defaultLat: 38.146048668428364,
      defaultLng: 114.51638121460337,
    }
  },
  mounted() {
    this.initMap();
  },
  watch: {
    longitude(n, o) {
      if(n){
        this.updatePoint();
      }
    },
    latitude(n, o) {
      if(n) {
        this.updatePoint();
      }
    }
  },
  methods: {
    initMap() {
      //定义地图中心点坐标
      let center = new TMap.LatLng(this.latitude ? this.latitude : this.defaultLat, this.longitude ? this.longitude : this.defaultLng);
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      let map = new TMap.Map(document.getElementById(this.containerId), {
          center: center,//设置地图中心点坐标
          zoom: 14.2,   //设置地图缩放级别
          pitch: 0,  //设置俯仰角
          rotation: 0    //设置地图旋转角度
      });
      this.map = map;
      //创建并初始化MultiMarker
      let markerLayer = new TMap.MultiMarker({
        map: map,  //指定地图容器
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          "myStyle": new TMap.MarkerStyle({
            "width": 25,  // 点标记样式宽度（像素）
            "height": 25, // 点标记样式高度（像素）
            // "src": '../../statics/2023/09/20/b30927e6-550e-40d4-843c-92d4d6330be2.png',  //图片路径
            "src": pointImg,  //图片路径
            // "src": '../../statics/2023/09/20/5077eed2-7c1c-41c4-8ab3-192b45add8d7.png',  //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            "anchor": { x: 12, y: 25 }
          })
        },
      });
      this.markerLayer = markerLayer;
      // 设置点击事件
      this.map.on('click', this.mapClick);
      this.markerLayer.remove(['1']);
      this.putPointIcon(this.latitude, this.longitude);
    },
    // 地图点击事件
    mapClick(event) {
      this.markerLayer.remove(['1']);
      this.putPointIcon(event.latLng.lat, event.latLng.lng);
      this.$emit('selected', event.latLng)
    },
    // 更新中心点
    updatePoint() {
      // if (!this.centerEnable) {
        this.map.setCenter([this.latitude, this.longitude]);
        this.markerLayer.remove(['1']);
        this.putPointIcon(this.latitude, this.longitude);
        this.centerEnable = true;
      // }
    },
    // 放置点位图标
    putPointIcon(lat, lng) {
      this.markerLayer.add([{
        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        "styleId": 'myStyle',  //指定样式id
        "position": new TMap.LatLng(lat, lng),  //点标记坐标位置
        "properties": {//自定义属性
          "title": "marker1"
        }
      }]);
    },
  }
}
</script>
